<ng-container id="monitoring_replay_container">
  <!-- 监控列表-视频选择 -->
  <nz-row id="list_container">
    <nz-col nzSpan="24">
      <!-- 按钮 -->
      <nz-row>
        <nz-col nzSpan="3">共10个文件</nz-col>
        <nz-col>
          <button nz-button nzSize="small" (click)="exportIt($event)">
            <span alt="导出" class="active-icon upload-svg"></span>
            导出
          </button>
          <button nz-button nzSize="small" (click)="lockIt($event)">
            <span alt="锁定" class="active-icon lock-svg"></span>
            锁定
          </button>
          <button nz-button nzSize="small" (click)="unLockIt($event)">
            <span alt="解锁" class="active-icon unlock-svg"> </span>
            解锁
          </button>
          <nz-divider nzType="vertical"></nz-divider>
          <button nz-button nzSize="small" (click)="reChoose($event)">重新选择</button>
        </nz-col>
      </nz-row>
      <!-- 列表 -->
      <nz-row>
        <nz-col nzSpan="2">
          <ul class="device_ul">
            <li
              class="device_li"
              *ngFor="let item of deviceList; let i = index"
              [ngClass]="{ highLight: isActive === i }"
              (click)="changeDevices(i)"
            >
              {{ item }}
            </li>
          </ul>
        </nz-col>
        <nz-col>
          <nz-row class="replay_list_box">
            <nz-col class="replay_list_item" *ngFor="let item of replayList; let i = index"> {{ item }} </nz-col>
          </nz-row>
        </nz-col>
      </nz-row>
    </nz-col>
  </nz-row>

  <!-- 屏幕容器 -->
  <nz-row id="screen_container">
    <!-- 屏幕分格 span=24或12-->
    <nz-col nzSpan="24">
      <!-- 屏幕 -->
      <nz-row class="screen_box">
        <nz-col nzSpan="24">
          <!-- 截图，关闭按钮 -->
          <nz-row class="screen_top_btn_hot">
            <nz-col nzSpan="24" class="screen_top_btn_box">
              <div class="icon_box">
                <a (click)="screenshot($event)"><span alt="截图" class="active-icon piclight-svg"></span></a>
                <a (click)="close($event)"><span alt="关闭" class="active-icon close_light-svg"></span></a>
              </div>
            </nz-col>
          </nz-row>
          <!-- 视频画面 -->
          <nz-row class="screen">
            <video src=""></video>
          </nz-row>
        </nz-col>
      </nz-row>
    </nz-col>
  </nz-row>

  <!-- 视频控件 -->
  <nz-row id="controller_container">
    <nz-col nzSpan="24">
      <!-- 控件栏 -->
      <nz-row style="margin: 2px">
        <!-- 左-日期跳转 -->
        <nz-col nzSpan="6">
          <div class="flex">
            <div class="all_btn" [ngClass]="{ is_contrall_all: isContrallAll }" (click)="isContrallAllChange()">ALL</div>
            <!-- <nz-time-picker></nz-time-picker> -->
            <span>2020-12-14 00:00:00 <i nz-icon nzType="calendar" nzTheme="outline"></i></span>
            <a class="icon_box" (click)="jumpTo($event)">
              <span alt="跳转" class="active-icon return-svg"></span>
            </a>
          </div>
        </nz-col>
        <!-- 中-播放控制按钮组 -->
        <nz-col nzSpan="15">
          <nz-row>
            <nz-col nzSpan="2">
              <a class="icon_box" (click)="synchronize()">
                <span alt="同步" class="active-icon synchronize-svg"></span>
              </a>
            </nz-col>
            <nz-col nzSpan="10">
              <a *ngFor="let item of controlBtnList" (click)="item.clickFunc()">
                <span class="active-icon {{ item.iconClass }}"></span>
              </a>
            </nz-col>
            <nz-col nzSpan="6">
              <div class="speed_control_box">
                <!-- <div>
                  <input type="range" list="tickmarks" />
                  <datalist id="tickmarks">
                    <option value="{{ item }}" *ngFor="let item of speedList"></option>
                  </datalist>
                </div> -->
                <div class="speed_a_list_box">
                  <a
                    class="speed_a_list"
                    *ngFor="let item of speedList; let i = index"
                    [ngClass]="{ bgc_light: nowSpeed === i }"
                    (click)="speedChange(i)"
                  ></a>
                </div>
                <div class="speed_text">{{ speedList[nowSpeed] }}</div>
              </div>
            </nz-col>
            <nz-col nzLg="4" nzMd="6">
              <div class="voice_control_box">
                <!-- <range-picker>声音</range-picker> -->
                <div class="icon_box" *ngIf="!isMuted" (click)="mute()" (mousewheel)="voiceChange($event)">
                  <span alt="voice" class="active-icon notificationfill-svg"></span>
                </div>
                <div class="icon_box" *ngIf="isMuted" (click)="mute()" (mousewheel)="voiceChange($event)">
                  <span alt="voice" class="active-icon notificationforbidfill-svg"></span>
                </div>
                <input
                  class="voice_range"
                  name="voiceRange"
                  type="range"
                  min="0"
                  max="100"
                  [value]="voice"
                  step="1"
                  (click)="voiceChange($event)"
                />
              </div>
            </nz-col>
          </nz-row>
        </nz-col>
        <!-- 右-扩展按钮 -->
        <nz-col nzSpan="3">
          <div class="extra_control_box">
            <a class="icon_box extra_control_btn" *ngFor="let item of extraBtnList" (click)="item.clickFunc()">
              <span alt="" class="active-icon {{ item.iconClass }}"></span>
            </a>
          </div>
        </nz-col>
      </nz-row>

      <!-- 时间条 -->
      <nz-row>
        <nz-col nzSpan="1">
          <nz-row> {{ deviceList[isActive] }} </nz-row>
          <nz-divider style="margin: 1px"></nz-divider>
          <nz-row> ALL </nz-row>
        </nz-col>
        <!-- 时间刻度条容器 -->
        <nz-col nzSpan="23" class="time_scale_bar">
          <!-- 刻度线canvas -->
          <div class="time_scale">
            <canvas
              #timeScaleCanvas
              class="time_scale_canvas"
              (mousedown)="onMouseDown($event)"
              (mouseleave)="onMouseLeave($event)"
              (mouseup)="onMouseUp($event)"
            ></canvas>
          </div>
          <!-- 回到当前刻度 -->
          <div class="back_to_now" [ngClass]="{ displayNone: displayNone }">
            <span alt="回到当前刻度" class="active-icon back-svg"></span>
          </div>
        </nz-col>
      </nz-row>
    </nz-col>
  </nz-row>
</ng-container>
